import { Store } from "../../core";

import ScrollMode from "./ScrollMode";
import StoreProps from "./StoreProps";
import useScrollMode from "./useScrollMode";
import { FC, useEffect } from "react";

const Tracker: FC<{
  store: Store<StoreProps>;
}> = ({ store }) => {
  const { switchTo } = useScrollMode(store);

  const handlePagesContainer = (getPagesContainer: () => HTMLElement) => {
    const pagesEle = getPagesContainer();
    if (!pagesEle) {
      return;
    }
    const scrollMode = store.get("scrollMode") || ScrollMode.Vertical;
    if (scrollMode !== ScrollMode.Vertical) {
      switchTo(scrollMode);
    }
  };

  useEffect(() => {
    store.subscribe("getPagesContainer", handlePagesContainer);

    return (): void => {
      store.unsubscribe("getPagesContainer", handlePagesContainer);
    };
  }, []);

  return <></>;
};

export default Tracker;
